<template>
  <a-popover overlayClassName="relation-selector-more-button-modal" class="relation-selector-more-button-modal">
    <template slot="title">
      <div class="relation-selector-more-button-modal-title"
           @click="toggleSelectAll">
        <a-checkbox :checked="checkedAll"/>
        全选
      </div>
    </template>
    <template slot="content">
      <div class="relation-selector-more-button-modal-content">
        <div class="relation-selector-more-button-modal-content-search-wrapper relation-selector-more-button-modal-content-search-item">
          <a-input-search size="small" v-model="searchText" placeholder="请输入关键字"/>
        </div>

        <div @click="() => toggleConfig(item)"
          v-for="item in searchedShowFields" class="relation-selector-more-button-modal-content-search-item">
          <a-checkbox :checked="isCheckedConfig(item)"/>
          {{ getLabel(item) }}
        </div>
      </div>
    </template>
    <div class="relation-seletor-search-more-button">
      更多<span class="iconfont">&#xea51;</span>
    </div>
  </a-popover>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'RelationSelectorSearchMoreButton',
  model: createModelForVue('showFields'),
  props: {
    showFields: createProps(Array, () => undefined),
    moreSearch: createProps(Array, () => undefined),
  },
  data() {
    return {
      searchText: undefined,
    };
  },
  methods: {
    toggleSelectAll() {
      if (this.checkedAll) {
        this.change([]);
      } else {
        this.change(this.innerMoreSearch.map(item => item.fieldConfig.id));
      }
    },
    toggleConfig(item) {
      let list = [...this.innerShowFields], index = list.indexOf(item.fieldConfig.id);
      if (index !== -1) {
        //已经选中了
        list.splice(index, 1);
      } else {
        //没有选中
        list.push(item.fieldConfig.id);
      }
      this.change(list)
    },
    change(v) {
      this.$emit('change', v);
    },
    getLabel(config) {
      try {
        return config.searchConfig.label || config.fieldConfig.label;
      } catch (e) {
      }
      return '';
    },
    isCheckedConfig(item) {
      return this.innerShowFields.includes(item.fieldConfig.id);
    },
  },
  computed: {
    checkedAll() {
      let res = (this.innerShowFields.length === this.innerMoreSearch.length) && this.innerShowFields.length || false
      return !!res;
    },
    innerMoreSearch() {
      return this.moreSearch || [];
    },
    innerShowFields() {
      return this.showFields || [];
    },
    searchedShowFields() {
      if (!this.searchText) return this.innerMoreSearch;
      return this.innerMoreSearch.filter(item => this.getLabel(item).indexOf(this.searchText) !== -1);
    },
  }
};
</script>
<style>
.relation-seletor-search-more-button {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  user-select: none;
}

.relation-selector-more-button-modal-title {
  padding: 5px 10px;
  cursor: pointer;
}
.relation-selector-more-button-modal-content {
  overflow: auto;
  max-height: 200px;
  min-height: 120px;
}
.relation-selector-more-button-modal-content-search-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  background: white;
}
.relation-selector-more-button-modal-content-search-item,
.relation-selector-more-button-modal-content-search-wrapper {
  padding: 5px 10px;
  display: flex;
  align-items: center;
}
.relation-selector-more-button-modal-content-search-item {
  cursor: pointer;
}
.relation-selector-more-button-modal-title:hover,
.relation-selector-more-button-modal-content-search-item:hover {
  background: #f6f8fb;
}

.relation-selector-more-button-modal {

}

.relation-selector-more-button-modal .ant-popover-title {
  padding: 0;
}
.relation-selector-more-button-modal .ant-popover-inner-content {
  padding: 0;
}

.relation-selector-more-button-modal .ant-checkbox-wrapper {
  margin-right: 5px;
}
</style>